<template>
  <div class="centeet">
    <div class="top">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="5" :sm="8">
              <a-form-item :label="$t('message.Accounting_entity')">
                <a-select v-model="form.targetName" :placeholder="$t('message.Please_select')" allowClear>
                  <a-select-option v-for="province in CostCalData" :key="province.departName"
                                   :value="province.departName">
                    {{ province.departName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="8">
              <a-form-item :label="$t('message.Accounting_standard')">
                <a-select v-model="form.standardId" :placeholder="$t('message.Please_select')" allowClear>
                  <a-select-option v-for="province in provinceData" :key="province.key" :value="province.key">
                    {{ province.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="8">
              <a-form-item :label="$t('message.Accounting_date')">
                <a-date-picker v-model="form.year" :format="monthFormat" :valueFormat="monthFormat" mode="year"
                               allowClear :open="yearOpen" @panelChange="opanelChange" @openChange="onopenelChange"/>
              </a-form-item>
            </a-col>
            <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :md="6" :sm="24">
                <a-button type="primary" @click="searchQuery">{{$t('message.Search')}}</a-button>
                <a-button style="margin-left: 8px" @click="searchReset">{{$t('message.Reset')}}</a-button>
              </a-col>
            </span>
          </a-row>
        </a-form>
      </div>
    </div>

    <div class="tables">
      <a-table size="middle" :columns="columns" :data-source="dataSource" bordered @change="onchange" :pagination="pagination">
        <!-- <template slot="name" slot-scope="text, record, index">
          <div class="editable-row-operations">
         {{rescord.targetName}}碳排报告
          </div>
        </template> -->
        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <a style="margin-right:14px" @click="() => exportXlsTemplate(record.downloadUrl)">{{$t('message.Download')}}</a>
            <a-popconfirm :title="$t('message.Confirm_delete')" :cancelText="$t('message.Cancel')" 
              :okText="$t('message.Confirm')" @confirm="() => onDEelte(record.id)">
              <a>{{$t('message.Delete')}}</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import {getAction, postAction, deleteAction} from "@api/manage";
import moment from "moment";
import {downFile} from '@/api/manage'
import {cloneObject} from "@/utils/util";

export default {
  name: "report",
  data() {
    return {
      yearOpen: false,
      monthFormat: "YYYY",
      columns: [{
        title: this.$t('message.Report_NO'),
        align: "center",
        dataIndex: "reportCode",
      }, {
        align: "center",
        title: this.$t('message.Accounting_entity'),
        dataIndex: "targetName",
      }, {
        align: "center",
        title: this.$t('message.Accounting_standard'),
        dataIndex: "standardName",
      }, {
        align: "center",
        title: this.$t('message.Accounting_date'),
        dataIndex: "year",
      }, {
        title: this.$t('message.Update_date'),
        align: "center",
        dataIndex: "updateTime",
      }, {
        title: this.$t('message.Handle'),
        dataIndex: "operation",
        align: "center",
        scopedSlots: {customRender: "operation"},
      }],
      form: {},
      dataSource: [],
      provinceData: [],
      CostCalData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
    };
  },
  mounted() {
    this.getData(1);
  },
  methods: {
    onDEelte(value) {
      deleteAction("/cyOrgCarbonReport/delete", {
        id: value
      }).then((res) => {
        if (res.success) {
          this.getData(1);
        }
      });
    },
    /**
     * 核算标准
     */
    loadTreeRoot(value) {
      console.log(value);
      getAction("/sys/category/loadTreeRoot", {
        pcode: "A01",
        async: true,
      }).then((res) => {
        if (res.success) {
          this.provinceData = res.result;
        }
      });
    },
    /**
     * 核算主体
     */
    saveUpdate(value) {
      console.log(value);
      getAction("/orgDept/getOrgAllSubjectOfCostCalc", {
        name: this.name,
      }).then((res) => {
        if (res.success) {
          this.CostCalData = res.result;
        }
      });
    },
    getData(page) {
      if (page === 1) {
        this.pagination.current = 1;
      }
      let reqData = cloneObject(this.form)
      reqData.pageNo = this.pagination.current
      reqData.pageSize = this.pagination.pageSize
      getAction("/cyOrgCarbonReport/list", reqData).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.pagination.total = res.result.total;
          this.saveUpdate();
          this.loadTreeRoot();
        }
      });
    },
    onopenelChange(status) {
      this.yearOpen = status;
    },
    opanelChange(value, mode) {
      console.log(value, mode);
      this.form.year = moment(value).format("YYYY");
      this.yearOpen = false;
    },
    /**
     *下载报告
     */
    exportXlsTemplate(value) {
      let url = window._CONFIG['staticDomainURL'] + "/" + value
      console.log('onDownloadReport', url)
      window.open(url, '_blank')
    },
    searchQuery() {
      this.getData(1);
    },
    searchReset() {
      this.form = {};
      this.getData(1);
    },
    //分页
    onchange(e) {
      console.log(e);
      this.pagination = e;
      this.getData()
    },
  },
};
</script>
<style lang="less" scoped>
.centeet {
  padding: 24px;
}

.color1 {
  color: #888888;
}

.inpts {
  width: 80px !important;
}

.tianjia {
  width: 380px;
  height: 156px;
  background: #f8f8f8;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .color {
    color: #888888;
  }

  .leftShoudong {
    background: #fff !important;
    border-color: #148958 !important;
    color: #148958 !important;
  }

  .marRight {
    margin-left: 16px;
  }
}

.tables {
  padding: 24px;
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #eeeeee;
  margin-top: 24px;
}

.top {
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  padding: 24px 24px 0;
}
</style>
